<!--<template>-->

<!--  <div class="container">-->
<!--    <div class="dishes">-->
<!--      <div class="dishes-type">-->
<!--          <el-card v-for="i in 5" :key="i"-->
<!--                   style="width: 100%; height: 80px;-->
<!--                   text-align: center">-->
<!--          </el-card>-->
<!--      </div>-->

<!--      <div class="dishes-list">-->
<!--        <el-card v-for="i in 77" :key="i"-->
<!--                 style="width: 100%; height: 200px;-->
<!--                 display: flex;-->
<!--                 flex-direction: column;-->
<!--                 text-align: center">-->
<!--&lt;!&ndash;          <el-card style="width: 100%; height: 80%; text-align: center">&ndash;&gt;-->

<!--&lt;!&ndash;          </el-card>&ndash;&gt;-->
<!--          <div style="width: 100%; height: 40px; text-align: center;-->
<!--                display: flex;">-->
<!--            <div style="width: 50px">99</div>-->
<!--            <el-input-number v-model="num" :min="1" :max="10"-->
<!--                             size="small" @change="handleChange" />-->
<!--          </div>-->
<!--        </el-card>-->
<!--      </div>-->

<!--    </div>-->
<!--    <div class="cart">-->
<!--      <div class="history">-->
<!--        <h1>cart</h1>-->
<!--        <div class="cart-list">-->
<!--&lt;!&ndash;          <el-card>&ndash;&gt;-->
<!--&lt;!&ndash;            <div v-for="item in cartList">&ndash;&gt;-->
<!--&lt;!&ndash;              {{item}}&ndash;&gt;-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->
<!--&lt;!&ndash;          </el-card>&ndash;&gt;-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="money">-->
<!--        <h1>购物车总额</h1>-->
<!--        <h1>商品总额</h1>-->
<!--        <h1>配送费</h1>-->
<!--        <h1>总额</h1>-->
<!--        <el-button type="primary">去结算</el-button>-->

<!--      </div>-->
<!--    </div>-->
<!--  </div>-->

<!--</template>-->

<!--<script setup lang="ts">-->

<!--import {onMounted, ref} from 'vue'-->
<!--import axios from "axios";-->
<!--const shop_id=ref();-->
<!--const cartList=ref([1,2,3,4,5]);-->
<!--onMounted(()=>{-->
<!--  shop_id.value=localStorage.getItem('shop_id');-->
<!--})-->

<!--const num = ref(1)-->
<!--const handleChange = (value: number | undefined) => {-->
<!--  console.log(value)-->
<!--}-->


<!--</script>-->

<!--<style scoped>-->

<!--.container{-->
<!--  width: 100%;-->
<!--  height: 100%;-->
<!--  display: flex;-->
<!--}-->

<!--.dishes{-->
<!--  width: 70%;-->
<!--  height: 100%;-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  align-items: center;-->
<!--}-->

<!--.dishes-type {-->
<!--  width: 90%;-->
<!--  height: 30%;-->
<!--  background: #4CAF50;-->
<!--  display: grid;-->
<!--  grid-template-columns: repeat(4, 1fr);-->
<!--  gap: 15px;-->
<!--}-->


<!--.dishes-list {-->
<!--  margin-top: 10px;-->
<!--  width: 90%;-->
<!--  display: grid;-->
<!--  grid-template-columns: repeat(3, 1fr);-->
<!--  gap: 15px;-->
<!--}-->




<!--.cart{-->
<!--  width: 26%;-->
<!--  height: 88vh;-->
<!--  background: #cccccc;-->
<!--  position: fixed;-->
<!--  right: 0;-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  justify-content: center;-->
<!--  align-items: center;-->
<!--}-->
<!--.history{-->
<!--  width: 90%;-->
<!--  height: 60%;-->
<!--  display: flex;-->
<!--  justify-content: center;-->
<!--  align-items: center;-->
<!--  background: #888888;-->
<!--  flex-direction: column;-->
<!--}-->
<!--.cart-list{-->
<!--  width: 100%;-->
<!--  height: 100%;-->
<!--  background: #303133;-->
<!--}-->

<!--.money{-->
<!--  width: 90%;-->
<!--  height: 30%;-->
<!--  background: #888888;-->
<!--}-->

<!--</style>-->
<template>
    <el-scrollbar height="615px">
        <!-- form 查询表单 -->
        <el-form :model="dishes" ref="formRef" label-width="auto" label-position="right" style="padding-bottom: 10px;">
            <el-row :gutter="20">
              <el-col :span="2">
                <el-button type="success" @click="backDelivery1" size="large">返回</el-button>
              </el-col>
                <el-col :span="5">
                    <el-form-item label="菜名" prop="name" size="large">
                        <el-input v-model="dishes.name" placeholder="请输入菜名" clearable size="large"/>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="价格" prop="price" size="large">
                        <el-input v-model="dishes.price" placeholder="请输入价格" clearable size="large"/>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="状态" prop="state" size="large">
                        <el-select v-model="dishes.state" placeholder="状态" clearable size="large">
                            <el-option label="全部" value="" />
                            <el-option label="上架" value="1" />
                            <el-option label="下架" value="0" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="doDish"
                        size="large">查询</el-button>
                </el-col>
            </el-row>


  <div class="container">
    <!-- 菜品区域 -->
    <div class="dishes">
      <!-- 菜品分类 - 固定位置 -->
      <div class="dishes-type">
        <el-button class="type-card" :class="{ 'active': activeCategory === '' }" @click="search('')">
          <el-icon :size="30"><KnifeFork /></el-icon>
          <div class="type-content" >全部</div>
        </el-button>
        <el-button class="type-card" :class="{ 'active': activeCategory === '主食' }" @click="search('主食')">
          <el-icon :size="30"><Food /></el-icon>
          <div class="type-content" >主食</div>
        </el-button>
        <el-button class="type-card" :class="{ 'active': activeCategory === '饮料' }" @click="search('饮料')">
          <el-icon :size="30"><MilkTea /></el-icon>
          <div class="type-content">饮料</div>
        </el-button>
        <el-button class="type-card" :class="{ 'active': activeCategory === '菜品' }" @click="search('菜品')">
          <el-icon :size="30"><DishDot /></el-icon>
          <div class="type-content" >菜品</div>
        </el-button>
        <el-button class="type-card" :class="{ 'active': activeCategory === '加菜' }" @click="search('加菜')">
          <el-icon :size="30"><Dessert /></el-icon>
          <div class="type-content">加菜</div>
        </el-button>
      </div>

      <!-- 菜品列表 - 可滚动区域 -->
      <div class="dishes-list-wrapper" :style="{
    backgroundImage: 'url(/1526fd74e5bf645c279f3bfc40dfa525.jpg)',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',

  }">
        <div class="dishes-list">
          <el-card  :style="{
    backgroundImage: 'url(/1688462791451891.png)',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',

  }" v-for="item in tableData" :key="item.id" class="dish-card" :body-style="{ padding: '0px 0px 0px 40px' }">
            <div class="dish-info" >
              <div class="photo">
                  <img :src="'/api' + item.picture" alt="菜品图片" class="dish-image" />
              </div>
              <div class="miaos" style="color: yellow">{{item.name}}</div>
            </div>
            <div class="dish-control">
              <span class="price">¥{{item.price}}</span>
              <el-input-number
                  v-model="item.count"
                  :min=0
                  size="small"
                  @change="(newVal, oldVal) => handleChange(newVal, oldVal, item.id, item.price,item.count)"
              />
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <!-- 购物车区域 - 固定位置 -->
    <div class="cart" >
      <div class="history" >
        <h2 class="cart-title">购物车</h2>
        <div class="cart-list" :style="{
    backgroundImage: 'url(/1682567931134289.png)',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',

  }">
          <div v-if="carData.length === 0" class="empty-cart">
            <el-empty style="color: tomato" description="暂无商品" />
          </div>
          <div v-else class="cart-item" v-for="(item, index) in carData" :key="index" style="background: tomato">
            <span style="color: yellow">{{ item.dish_name }}</span>
            <span style="color: violet">x{{item.num}}</span>
            <span style="color: violet">¥{{item.money}}</span>
          </div>
        </div>
      </div>
      <div class="money">
        <h3 class="money-title">结算信息</h3>
        <div class="price-item">
          <span>商品总额</span>
          <span>¥{{allmoney}}</span>
        </div>
        <div class="price-item">
          <span>配送费</span>
          <span>¥{{shop.gratuity}}</span>
        </div>
        <div class="price-item total">
          <span>总额</span>
          <span>¥{{allmoney+shop.gratuity}}</span>
        </div>
        <el-button type="primary" class="checkout-btn" :disabled="carData.length === 0"
                   @click="quzhifu(shop,tableData,allmoney+10)">
          去结算
        </el-button>
      </div>
    </div>
  </div>

  </el-form>
  <!-- 选好食物下单 dialog-->
  <el-dialog v-model="PlaceOrder" title="已选美食" width="60%" top="2vh" destroy-on-close>
    <yao-zhi-fu ref="ZhiFu"
                @closeDialog="temp">
    </yao-zhi-fu>
  </el-dialog>
    </el-scrollbar>
</template>

<script setup lang="ts">
import { onMounted, ref ,nextTick} from 'vue'
import { ElEmpty } from 'element-plus'
import axios from "axios";
import YaoZhiFu from "./YaoZhiFu.vue";
import router from "../../../router.ts";



const shop=ref({
  id: '',
  shopname: '',//店铺名称
  pwd: '',
  checked: '', //审核状态
  score: '',//评分
  phone: '',// 手机
  address: '',// 地址
  state: '',//状态
  picture: '',// 图片
  income: '',//收入
  gratuity: '',// 配送费
});
const car=ref({
  id: '',
  car_num: '',
  user_name: '',
  shop_name: '',
  dish_name: '',
  num: '',
  money: '',
});
const shopId=ref('');
const dishes=ref({
  id: '',
  name: '',
  price: '',
  shop_id: shopId,
  picture: '',
  dishes_class: '',
  state: '',
});

const backDelivery1=()=>{
  router.push({ path: '/user/delivery1' });
}

const tableData=ref([]);
const allmoney=ref(0);
//---------------------- 查询 ------------------------------
const doList=async ()=>{
  const {data} = await axios.get('/api/dishes/shop',{params:shop.value});
  shopId.value=shop.value.id;
  tableData.value = data;
  for(let i=0; i<tableData.value.length; i++){
    tableData.value[i].price=parseInt(tableData.value[i].price);
    tableData.value[i].count=0;
  }
  doCar();
};
const doDish=async ()=>{
    const {data} = await axios.get('/api/dishes',{params:dishes.value});
    tableData.value = data;
    for(let i=0; i<tableData.value.length; i++){
        tableData.value[i].price=parseInt(tableData.value[i].price);
        tableData.value[i].count=0;
    }
    doCar();
};

//---------------------- 减购 ------------------------------
const jian=async (id, price, count)=>{
  for(var i=0;i<tableData.value.length;i++)
    if(tableData.value[i].id==id&&tableData.value[i].count>=0) {
      car.value.dish_name=tableData.value[i].name;
      car.value.shop_name=shop.value.id;
      car.value.user_name=user.value.id;
      car.value.money=tableData.value[i].price;
      const {data} = await axios.get('/api/car/jian',{params:car.value});
      allmoney.value-=tableData.value[i].price;
      break;
    }
  flush();
};


//---------------------- 加购 ------------------------------
const add=async (id, price, count)=>{
  if(user.value.id==null||user.value.id==''||user.value.id==0){
    await router.push('/login');
    return;
  }

  for(var i=0;i<tableData.value.length;i++)
    if(tableData.value[i].id==id) {
      car.value.dish_name=tableData.value[i].name;
      car.value.shop_name=shop.value.id;
      car.value.user_name=user.value.id;
      car.value.num= count;
      car.value.money=tableData.value[i].price;
      console.log(car.value);
      const {data} = await axios.get('/api/car/exist',{params:car.value});

      allmoney.value+=tableData.value[i].price;
      break;
    }
  flush();
};

//---------------------- 获取购物车信息 ------------------------------
const carData=ref([]);
const doCar=async ()=>{
  car.value.shop_name=shop.value.id;
  car.value.user_name=user.value.id;

  const {data} = await axios.get('/api/car/selectCars',{params:car.value});
  carData.value = data;
  for(var i=0;i<carData.value.length;i++){

    for (var j=0;j<tableData.value.length;j++){

      if(tableData.value[j].name==carData.value[i].dish_name){
        tableData.value[j].count=carData.value[i].num;

        console.log(tableData.value[j].count);
        console.log(carData.value[i].num);
        allmoney.value+=tableData.value[j].price*tableData.value[j].count;
      }
    }
  }
};
const temp=()=>{
  PlaceOrder.value = false;
  doList();
  allmoney.value=0;
};

onMounted(() => {

  shop.value = JSON.parse(localStorage.getItem('shop'));
  acquireUsers();
  doList()
})


// -------------------------去支付 对话框---------------------
const PlaceOrder = ref(false);
const ZhiFu = ref(); // 组件引用
const quzhifu=async (obj1,obj2,obj3)=>{
  PlaceOrder.value = true;
  nextTick(()=>{
    ZhiFu.value.updateData(obj1,obj2,obj3);
  })
}


//--------------------------获取用户信息-----------------------
const user=ref({});
const acquireUsers=async ()=>{
  const {data} = await axios.get('/api/user1',{params:user.value});
  user.value=data;
  car.value.user_name=user.value.id;
}

//点击卡片搜索菜品
// const search=async (dishes_class)=>{
//     dishes.value.dishes_class=dishes_class;
//     console.log(dishes.value);
//     const {data} = await axios.get('/api/dishes',{params:dishes.value});
//     tableData.value = data;
//     for(let i=0; i<tableData.value.length; i++){
//         tableData.value[i].price=parseInt(tableData.value[i].price);
//         tableData.value[i].count=0;
//     }
//     doCar();
//     dishes.value.dishes_class="";
// }

const handleChange= (newVal, oldVal, id, price, count)=> {
  if (newVal > oldVal) {
    add(id,price, count);
  } else {
    jian(id,price, count);
  }

}
const flush = async () => {
  car.value.shop_name=shop.value.id;
  car.value.user_name=user.value.id;
  const {data} = await axios.get('/api/car/selectCars',{params:car.value});
  carData.value = data;
};


// 添加激活的分类状态
const activeCategory = ref('');

// 修改搜索函数以设置激活状态
const search=async (dishes_class)=>{
  activeCategory.value = dishes_class;
  dishes.value.dishes_class=dishes_class;
  console.log(dishes.value);
  const {data} = await axios.get('/api/dishes',{params:dishes.value});
  tableData.value = data;
  for(let i=0; i<tableData.value.length; i++){
    tableData.value[i].price=parseInt(tableData.value[i].price);
    tableData.value[i].count=0;
  }
  doCar();
  dishes.value.dishes_class="";
}
</script>

<style scoped>

.photo{
  width: 100%;
  height: 90px;
  background: #303133;
  border-radius: 10px;
}


.container {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 20px;
  box-sizing: border-box;
  gap: 20px;

}

/* 菜品区域样式 */
.dishes {
  width: 70%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 82vh; /* 占满视口高度 */

}

/* 分类卡片样式 */
.dishes-type {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  height: 80px; /* 固定高度 */
  flex-shrink: 0; /* 防止被压缩 */
}

.type-card {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #FFFFFF; /* 默认背景色 */
  transition: background 0.3s ease; /* 添加过渡效果 */
}
.type-card.active {
  color: #FFFFFF;
  background: #409EFF; /* 激活状态的背景色 */
}


.type-content {
  font-size: 16px;
  font-weight: 500;
}

/* 菜品列表包装器 - 可滚动区域 */
.dishes-list-wrapper {
  flex: 1; /* 占据剩余空间 */

  overflow-y: auto; /* 垂直方向溢出时显示滚动条 */
  padding-right: 10px; /* 防止滚动条覆盖内容 */
}

/* 菜品列表样式 */
.dishes-list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding-bottom: 20px; /* 底部留出空间 */
}

.dish-card {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0px;
  box-sizing: border-box;
}

.dish-info {
  width: 80%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  font-size: 16px;
}

.dish-control {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  box-sizing: border-box;
}

.price {
  font-weight: 500;
  color: #45b7d1;
    font-size: 20px;
}

/* 购物车样式 */
.cart {
  width: 30%;
  height: calc(100vh - 140px); /* 减去容器内边距 */
  background: #f5f5f5;
  border-radius: 8px;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  padding: 15px;
  box-sizing: border-box;
  flex-shrink: 0; /* 防止被压缩 */
}

.history {
  width: 100%;
  height: 60%;
  background: #fff;
  border-radius: 6px;
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cart-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.cart-list {
  width: 100%;
  height: calc(100% - 30px);
  background: #fafafa;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cart-item {
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #eee;
}

.empty-cart {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 结算区域样式 */
.money {
  width: 100%;
  height: 38%; /* 留2%作为间距 */
  background: #fff;
  border-radius: 6px;
  padding: 15px;
  box-sizing: border-box;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.money-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.price-item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #666;
}

.price-item.total {
  font-weight: 600;
  color: #333;
  font-size: 16px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

.checkout-btn {
  width: 100%;
  margin-top: auto;
  padding: 12px 0;
  font-size: 16px;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .dishes {
    width: 65%;
  }
  .cart {
    width: 35%;
  }
  .dishes-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  .dishes, .cart {
    width: 100%;
  }
  .cart {
    height: auto;
    margin-top: 20px;
  }
  .dishes-type {
    grid-template-columns: repeat(2, 1fr);
    height: auto;
  }
}

.dish-image {
    width: 100%;
    height:100%;
    object-fit: cover;
    border-radius: 10px;
}
</style>



